<template>
  <div class="container">
    <div class="contain_top_fixed">益信车网-免费高价卖车</div>
    <img class="contain_top" src="../../static/9.jpg" alt="" />
    <div class="contain_info">
      <!-- <div class="info_top">
        <span class="info_title">免费预约 高价买车</span>
      </div> -->
      <div class="info_center">
        <van-cell-group style=" box-shadow: 0 0.08rem 0.08rem -0.02667rem hsl(0deg 0% 88% / 71%);overflow:hidden;
    border-radius: 5px;">
          <van-field
            v-model="currentCity"
            label="所在城市"
            right-icon="arrow"
            placeholder="请选择所在城市"
            @click="changeCity"
            readonly
          />
          <van-field
            v-model.trim="tel"
            type="tel"
            label="手机号码"
            placeholder="请输入手机号码"
            maxlength="11"
            clearable
          />
        </van-cell-group>
      </div>
      <div class="submit" @click="submit">免 费 高 价 卖 车</div>
      <div class="user_tip">
        <van-checkbox v-model="isChecked" checked-color="#ff6b23">
        </van-checkbox>
        <span class="tip_style">
          我已阅读并同意<span style="color: #ff6b23" @click="goxieyi()"
            >《个人用户隐私权政策》</span
          >
        </span>
      </div>
    </div>
    <div class="contain_info">
      <div class="info_top">
        <span class="info_title">我们的服务</span>
      </div>
      <img class="img1" src="../../static/2(2).png" alt="" />
    </div>
    <div class="contain_info">
      <div class="info_top">
        <span class="info_title">近期咨询人数</span>
      </div>
      <img class="img2" src="../../static/11.png" alt="" />
    </div>
    <div class="contain_info">
      <div class="info_top">
        <span class="info_title">卖车流程</span>
      </div>
      <img class="img3" src="../../static/10.png" alt="" />
    </div>
    <div class="contain_info">
      <div class="info_top">
        <span class="info_title">近期成交</span>
        <span class="info_right" @click="showScroll = true"
          >查看更多 <span class="more_img"></span
        ></span>
      </div>
      <van-swipe class="swipe_box" :autoplay="3000" indicator-color="#ff6b23">
        <van-swipe-item v-for="(item, index) in carList" :key="index">
          <div class="swipe_item">
            <img class="swipe_img" :src="item.img_src" alt="" />
            <div class="swipe_info">
              <div>{{ item.car_des }}</div>
              <div class="swipe_year">
                <span>{{ item.open_date }}年</span
                ><span style="margin: 0 10px">|</span
                ><span>{{ item.mile }}</span
                >万公里
              </div>
            </div>
          </div>
        </van-swipe-item>
      </van-swipe>
      <div class="data_form">*数据来源益信车网数据系统</div>
    </div>
    <div class="contain_info">
      <div class="info_top">
        <span class="info_title">益信同路人</span>
      </div>
      <van-swipe class="swipe_box" :autoplay="3000" indicator-color="#ff6b23">
        <van-swipe-item
          class="content_item"
          v-for="(item, index) in messageList"
          :key="index"
        >
          <div class="swipe_content">
            {{ item.content }}
          </div>
          <div class="swipe_fromUser">
            {{ item.name }}通过微信公众号“益信车网”留言
          </div>
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="contain_info">
      <div class="info_top">
        <span class="info_title">卖车问答</span>
      </div>
      <van-collapse v-model="activeName" accordion>
        <van-collapse-item
          icon="question"
          v-for="(item, index) in desList"
          :key="index"
          :title="item.title"
          :name="index"
          >{{ item.label }}</van-collapse-item
        >
      </van-collapse>
    </div>
    <!-- <div class="contain_info">
      <div class="info_top">
        <span class="info_title">保障资质</span>
        <span class="info_right" @click="showZiZhi = true"
          >查看更多 <span class="more_img"></span
        ></span>
      </div>
      <div class="bao_box">
        <div class="bao_item">
          <img class="bao_img" src="../../static/7.png" alt="" />
          <span>阿里云备案</span>
        </div>
        <div class="bao_item">
          <img class="bao_img2" src="../../static/8.png" alt="" />
          <span>百度保障</span>
        </div>
      </div>
    </div> -->
    <div class="bao_tip">该页面由益信车网平台设计并提供</div>
    <div class="about_box">
      <span class="about_item" @click="goAboutUs">关于我们</span>
      <span class="about_item"
        ><a class="about_item" href="tel:4001818730">联系我们</a></span
      >
    </div>
    <div class="bao_tip">南通益客汽车服务有限公司</div>
    <div class="bao_tip">
      <a class="bao_tip" target="_blank" href="https://beian.miit.gov.cn"
        >苏ICP备2021001955号-1</a
      >
    </div>

    <div class="contain_bottom" v-show="isShowBox">
      <div class="submit_box">
        <div class="submit_left">
          <div class="inside_left" @click.stop="showCity = true">
            <span style="margin-right: 5px">{{ currentCity }}</span
            ><van-icon name="arrow-down" size="12" color="#979797" />
          </div>
          <div>
            <van-field
              style="background-color: #f8f8f8"
              v-model.trim="tel"
              type="tel"
              placeholder="请输入手机号码"
              maxlength="11"
              clearable
            />
          </div>
        </div>

        <div class="submit_right" @click="submit">
          <span>高价卖车</span>
          <img class="submit_img" src="../../static/arrow-right.png" alt="" />
        </div>
      </div>
    </div>

    <van-popup v-model="showCity" position="bottom">
      <van-area
        title="选择城市"
        :area-list="areaList"
        :columns-num="2"
        @confirm="confirm"
        @cancel="showCity = false"
      />
    </van-popup>

    <!-- 验证码 -->
    <div class="pop_bg" v-if="yvisible">
      <div class="popup_box1" v-if="yvisible" @click.stop="">
        <div class="popup_yan">
          <div class="yan_top">请输入验证码</div>
          <div class="yan_tip">已向 {{ phone }} 发送短信</div>
          <van-password-input
            :value="code"
            :length="6"
            :mask="false"
            :focused="showKeyboard"
            @focus="showKeyboard = true"
          />
          <!-- 数字键盘 -->
          <van-number-keyboard
            v-model="code"
            :show="showKeyboard"
            @blur="showKeyboard = false"
          />
          <div v-show="!waiting" class="yan_send">
            <span @click="sendTianCode">发送验证码</span>
          </div>
          <div v-show="waiting" class="yan_send">{{ count }}s后重试</div>
        </div>
        <div class="popup_bottom">
          <div class="btn_style cancel_btn" @click="yvisible = false">
            取 消
          </div>
          <div class="btn_style query_btn" @click="submitForm">确 认</div>
        </div>
      </div>
    </div>

    <ZiZhi v-if="showZiZhi" @close="showZiZhi = false" />
    <Scroll v-if="showScroll" @close="showScroll = false" :data="carList" />
  </div>
</template>

<script>
import { carList } from "../../static/dataJson/car.js";
import { areaList } from "../../static/dataJson/city.js";
import { Notify } from "vant";
import ziZhi from "@/components/ZiZhi";
import Scroll from "@/components/Scroll";

// postMassApply, postChildMassApply,
import {
  getPrivateImg,
  // getSmsSwitch,
  postTianruiyun,
  postMassApply,
  postOnSiteData,
} from "@/api/user.js";
import startLocation from "@/api/getLocation.js";
import axios from "axios";
import dayjs from "dayjs";

export default {
  components: {
    [Notify.Component.name]: Notify.Component,
    ziZhi,
    Scroll,
  },
  name: "homeIndex",
  data() {
    return {
      showKeyboard: false,
      areaList, // 城市数据
      // smsArr: [], // 短信
      showCity: false, // 选择城市弹框
      currentCity: "", // 被选城市
      tel: "", // 手机号
      isChecked: false, // 同意协议
      privateImgs: [], // 隐私图
      carList: carList,
      phone: "",
      count: 60,
      yvisible: false, // 验证码显示
      waiting: false,
      code: "", // 验证码
      tempCode: "", // 保留的验证码（校验）
      origin: "",
      timer: "",
      messageList: [
        {
          content:
            "在益信车网卖车很放心，很贴心。只需要填一个手机号，其他都有专业的人员帮忙处理。实实在在为用户考虑，不用操心，工作生活上也不会花太多时间，祝益信车网越办越好！",
          name: "李**",
        },
        {
          content: "真的是高价卖车，当天评估，当天就成交了，体验很好",
          name: "赵**",
        },
        {
          content:
            "听朋友介绍就来尝试了一下，真的不错，评估师很细心的检查车辆，给出的价格我也很满意，给益信一个赞！",
          name: "王**",
        },
      ],
      desList: [
        {
          title: "益信卖车模式是什么 ",
          label:
            "借助益信全国的网络为车主找寻意向最强的买家，上门验车，即时报价，立刻打款",
        },
        {
          title: "为什么选择在益信卖车 ",
          label:
            "1、价格高:益信车网全国网络直连买家,最高帮您多卖20%; 2、卖的快:最快当天预约,当天成交,当天付款; 3、透明交易:买卖交易面对面。中间环节无干扰",
        },
        {
          title: "我的车多久能卖出去 ",
          label:
            "根据经验, 车成交周期一般为3-5日。全国竞价, 最快当天成交当天过户",
        },
        {
          title: "通过哪里可以找到益信卖车 ",
          label: "微信搜索益信二手车小程序；抖音抖索益信车网小程序即刻预约卖车",
        },
      ],
      activeName: "1", // 折叠页
      isShowBox: true, // 底部是否显示
      showZiZhi: false,
      showScroll: false,
    };
  },
  created() {},
  mounted() {
    this.listenScroll(); // 监听滚动
    this._getPrivateImg(); // 获取隐私图
    // this._getSmsSwitch() // 获取短信
    startLocation.then(({ lat, lng }) => {
      // console.log(lat + '---' + lng)
      this._getLocation(lng + "," + lat);
    }); // 定位

    const query = this.$route.query;
    if (query && query.origin) {
      this.origin = query.origin;
    }
    const search = location.search;
    if (search) {
      const arr = search.split("=");
      this.origin = arr[1];
    }
  },
  methods: {
    async _getLocation(location) {
      const url =
        "https://restapi.amap.com/v3/geocode/regeo?output=json&location=" +
        location +
        "&key=7689b2155b3b7beb00f1173a1d11acef";
      axios.get(url).then((res) => {
        if (
          res.data &&
          res.data.regeocode &&
          res.data.regeocode.addressComponent &&
          res.data.regeocode.addressComponent.province
        ) {
          if (
            res.data.regeocode.addressComponent.city &&
            res.data.regeocode.addressComponent.city.length !== 0
          ) {
            this.currentCity = res.data.regeocode.addressComponent.city;
          } else {
            this.currentCity = res.data.regeocode.addressComponent.province;
          }
        }
      });
    },
    // 获取隐私图
    _getPrivateImg() {
      getPrivateImg().then((res) => {
        this.privateImgs = res;
      });
    },
    changeCity() {
      this.showCity = true;
    },

    listenScroll() {
      document.addEventListener("scroll", this.handleScroll, true);
    },
    handleScroll() {
      const scroll =
        document.documentElement.scrollTop ||
        window.pageYOffset ||
        document.body.scrollTop;
      if (scroll > 300) {
        this.isShowBox = true;
      } else {
        this.isShowBox = false;
      }
    },
    // 选择城市
    confirm(e) {
      console.log(e);
      this.showCity = false;
      this.currentCity = e[1].name;
    },
    // 显示弹窗
    submit() {
       if (!this.currentCity) {
        Notify({ type: "warning", message: "请选择城市" });
        return false;
      }
      if (!/^1[3456789]\d{9}$/.test(this.tel)) {
        Notify({ type: "warning", message: "请填写正确的手机号码" });
        return false;
      }
      if (!this.isChecked) {
        Notify({ type: "warning", message: "请勾选个人用户隐私权政策" });
        return false;
      }else {
        this.code = "";
        this.phone = this.tel.substr(0, 3) + "****" + this.tel.substr(7, 10);
        this.yvisible = true;
        this.sendTianCode();
      }
    },
    // 确认提交
    submitForm() {
      if (!this.code) {
        Notify({ type: "warning", message: "请填写验证码" });
        return;
      }
      if (this.code !== this.tempCode) {
        Notify({ type: "warning", message: "验证码不正确" });
        return;
      }
      const obj = {
        code: "D",
        city: this.currentCity,
        name: "",
        phone: this.tel,
        // phone: '18539475863',//测试用
        brand: "",
        opentime: "",
        mile: "",
      };
      postMassApply(obj).then((res) => {
        // 埋点
         _baq.track('form', { assets_id: 1744740297380877})
        this.postOnSite(); //添加站内通知
      });
    },
    //添加站内通知
    postOnSite() {
      let data = {
        phone: this.tel,
        source: "抖音h5",
        type: 3,
        apply_time: dayjs().format("YYYY-MM-DD HH:mm:ss"),
        brand: "",
        kilometer: "",
        address: this.currentCity,
        note: "h5提交卖车信息",
      };
      postOnSiteData(data).then((res) => {
        Notify({ type: "success", message: "提交成功" });
        this.tel = "";
        this.tempCode = "";
        this.yvisible = false;
        this.waiting = false;
        this.count = 60;
        if (this.timer) {
          clearInterval(this.timer);
        }
      });
    },

    // 发送验证码
    sendTianCode() {
      let code = "";
      for (let i = 0; i < 6; i++) {
        code += "" + parseInt(Math.random() * 10);
      }

      let data = {
        // mobile: '18539475861', //测试用
        mobile: this.tel + "",
        template_id: 227780,
        content: code + "##" + "2",
      };
      postTianruiyun(data).then((res) => {
        this.tempCode = code;
        Notify({ type: "success", message: "发送成功" });
        this.waiting = true;
        this.count = 60;
        this.timer = setInterval(() => {
          this.count--;
          if (this.count < 0) {
            clearInterval(this.timer);
            this.waiting = false;
            this.count = 60;
          }
        }, 1000);
      });
    },
    goxieyi() {
      const xieyiList = encodeURIComponent(JSON.stringify(this.privateImgs));
      this.$router.push({
        path: "/xieyiIndex",
        query: {
          xieyiList,
        },
      });
    },
    goAboutUs() {
      this.$router.push({
        path: "/aboutUs",
      });
    },
  },
};
</script>

<style scoped lang="less">
.container {
  position: relative;
  letter-spacing: 1px;
  padding-bottom: 200px;
  padding-top: 800px;

  .contain_top_fixed {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    text-align: center;
    padding: 20px 0;
    background-color: #000;
    font-size: 30px;
    color: #fff;
    z-index: 3;
  }

  .contain_top {
    position: absolute;
    left: 0;
    top: 80px;
    width: 100%;
    // height: 623px;
    vertical-align: top;
  }
  .contain_info {
    background-color: #fff;
    margin-bottom: 15px;
    padding: 22px 20px;
    font-size: 32px;
    .info_top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 30px 0;
      padding-left: 18px;
      position: relative;
      .info_title {
        &::before {
          content: "";
          position: absolute;
          top: 50%;
          left: 0;
          transform: translateY(-50%);
          width: 8px;
          height: 24px;
          background: #ff6b23;
          border-radius: 4px;
        }
      }
      .info_right {
        display: flex;
        align-items: center;
        font-size: 12px;
        color: #606060;
        .more_img {
          width: 12px;
          height: 12px;
          display: inline-block;
          border-top: 2px solid #999999;
          border-right: 2px solid #999999;
          transform: rotate(45deg);
        }
      }
    }

    .info_center {
      border-radius: 10px;
      // overflow: hidden;
      box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.08);
    }
    .info_box {
      padding: 20px 35px;
    }

    .img1 {
      width: 100%;
      height: 400px;
    }
    .img2 {
      width: 100%;
      height: 300px;
    }
    .img3 {
      width: 100%;
      height: 190px;
    }
    .submit {
      width: 100%;
      height: 90px;
      line-height: 90px;
      text-align: center;
      margin: 100px 0 25px;
      background: #ff6b23;
      box-shadow: 0px 12px 20px 1px rgba(255, 127, 46, 0.39);
      border-radius: 10px;
      font-size: 30px;
      color: #ffffff;
    }
    .user_tip {
      display: flex;
      align-items: center;
      .tip_style {
        margin-left: 15px;
        font-size: 22px;
      }
    }

    .swipe_box {
      height: 250px;
      box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.08);
      border-radius: 15px;
      .swipe_item {
        display: flex;
        padding: 20px 35px;
        .swipe_img {
          width: 218px;
          height: 180px;
          margin-right: 40px;
        }
        .swipe_info {
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          font-size: 24px;
          color: #606060;
          .swipe_year {
            display: flex;
            align-items: center;
            color: #787878;
          }
        }
      }

      .content_item {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 20px 35px;
        font-size: 13px;
        color: #5e5e5e;
        .swipe_fromUser {
          padding-bottom: 25px;
          font-size: 12px;
          color: #a5a5a5;
        }
      }
    }
    .data_form {
      margin: 10px 0;
      font-size: 12px;
      color: #a5a5a5;
    }
    .bao_box {
      display: flex;
      justify-content: space-around;
      padding-top: 20px;
      .bao_item {
        display: flex;
        flex-direction: column;
        align-items: center;
        box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.08);
        padding: 20px 35px;
        border-radius: 15px;
        font-size: 12px;
        .bao_img {
          width: 120px;
          height: 30px;
          padding-bottom: 20px;
        }
        .bao_img2 {
          width: 120px;
          height: 40px;
          padding-bottom: 20px;
        }
      }
    }
  }
  .bao_tip {
    margin: 30px 0 20px;
    text-align: center;
    font-size: 12px;
    color: #a5a5a5;
  }
  .about_box {
    display: flex;
    justify-content: space-around;
    .about_item {
      font-size: 12px;
    }
  }
  .contain_bottom {
    //  height: 150px;
    width: 100%;
    background: #fff;
    transition: display 0.5s;
    position: fixed;
    left: 0;
    bottom: 0;
    padding: 20px 20px;
    z-index: 100;
    .submit_box {
      border-radius: 6px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background-color: #f8f8f8;
      .submit_left {
        flex: 1;
        display: flex;
        align-items: center;
        font-size: 32px;
        .inside_left {
          flex: 0 1 200px;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
      .submit_right {
        flex: 0 1 220px;
        display: flex;
        align-items: center;
        padding: 30px 20px;
        border-radius: 10px;
        background-color: #ff6b23;
        font-size: 32px;
        color: #ffffff;
        .submit_img {
          width: 36px;
          margin-left: 8px;
        }
      }
    }
  }
  .pop_bg {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    padding: 0 30px;
    background: rgba(0, 0, 0, 0.3);
    z-index: 120;

    .popup_box1 {
      position: relative;
      width: 100%;
      height: 550px;
      padding: 0 35px;

      border-radius: 25px;
      background-color: #ffffff;
      transition-property: opacity;
      transition-duration: 0.3s;

      .popup_yan {
        width: 100%;
        height: 550px;
        overflow: hidden;
        overflow-y: auto;

        // background-color: #42B983;
        .yan_top {
          font-weight: 600;
          font-size: 36px;
          text-align: center;
          padding: 30px 0;
        }
        .yan_tip {
          text-align: center;
          padding: 30px 0;
          font-size: 32px;
          color: #474747;
        }
        .yan_send {
          padding: 30px;
          text-align: end;
          font-size: 32px;
        }

        .main_paidui {
          line-height: 60rpx;
          text-indent: 2em;
          font-size: 36px;
          color: #959595;

          .num {
            color: #ff952d;
          }
        }

        .main_yanzheng {
          display: flex;
          justify-content: space-between;
          margin-top: 85px;
          border-bottom: 2px solid #f4f4f4;
        }

        .main_notic {
          line-height: 60px;
          text-indent: 2em;
          font-size: 30px;
          color: #959595;
        }
      }

      .popup_bottom {
        display: flex;
        position: absolute;
        width: 100%;
        bottom: 0;
        left: 0;
        font-size: 32px;
        // background-color: #007AFF;

        .btn_style {
          flex: 1;
          padding: 22px 0;
          text-align: center;
          color: #ffffff;
        }

        .cancel_btn {
          border-radius: 0px 0px 0px 25px;
          background: #ffb048;
        }

        .query_btn {
          border-radius: 0px 0px 25px 0px;
          background: #ff6923;
        }
      }
    }
  }
}
</style>
<style>
.van-cell {
  font-size: 28px;
}
.van-icon-question:before {
  color: #ff6b23;
  font-size: 38px;
}
</style>
